<div class="px-6 overflow-auto extension-list">
  <nz-spin class="w-fit mx-auto my-[30px]" nzSimple *ngIf="loading"></nz-spin>
  <nz-empty class="w-fit mx-auto my-[30px]" *ngIf="!loading && !renderList?.length"></nz-empty>
  <div class="grid gap-6 py-5 2xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-1">
    <div
      class="flex flex-col flex-wrap w-full transition-shadow duration-300 rounded border-all plugin-block hover:shadow-lg"
      *ngFor="let it of renderList"
      (click)="clickExtension($event, it)"
    >
      <div class="flex w-full p-5">
        <div class="flex w-full">
          <div class="flex flex-col w-full">
            <div class="flex flex-col w-full">
              <div class="flex items-center justify-between">
                <nz-avatar [nzSrc]="it.logo" nzShape="square"></nz-avatar>
                <div *ngIf="type !== 'installed'">
                  <span
                    *ngIf="extensionService.installedMap?.has(it.name)"
                    class="p-1 text-xs rounded-sm text-success border-all whitespace-nowrap"
                    i18n
                    >Installed</span
                  >
                </div>
              </div>
              <div class="flex justify-between text-lg">
                <span class="mt-2 mb-1 text-base font-bold">{{ it.title }}</span>
                <div *ngIf="type === 'installed'">
                  <eo-ng-switch
                    click-stop-propagation
                    [(ngModel)]="it.enable"
                    (ngModelChange)="extensionService.toggleEnableExtension(it.name, $event)"
                  ></eo-ng-switch>
                </div>
              </div>
              <span class="text-xs text-tips">{{ it.author }}</span>
              <div class="flex mt-[15px] text-[12px] desc leading-[1.65]">{{ it.description }}</div>
            </div>
            <div class="btn-group" *ngIf="type === 'installed'">
              <ng-container *ngIf="it.features?.configuration">
                <a eo-ng-button nzType="link" i18n>Setting</a>
                <nz-divider nzType="vertical"></nz-divider>
              </ng-container>
              <a eo-ng-button nzType="link"><span data-id="details" i18n="@@ExtensionDetail">Details</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
